import React, { Component } from "react";
import ReactEcharts from "echarts-for-react";
import echarts from 'echarts/lib/echarts';
import "../css/hdpiBody.scss";
import { Progress } from 'antd';
import { Viewer, EventTypes } from 'three-viewer-plus';

class HdpiBody extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const that = this;
    let options = {
      urls: [
        "data/guolu/boiler.glb",
        "data/guolu/conpip.glb",
        "data/guolu/dizaidiguo-1.glb",
        "data/guolu/dizaidiguo-2.glb",
        "data/guolu/dizaidiguo-3.glb",
        "data/guolu/dizaidiguo-4.glb",
        "data/guolu/dizaidiguo-5.glb",
        "data/guolu/gaoguo-1.glb",
        "data/guolu/gaoguo-2.glb",
        "data/guolu/gaozai.glb",
        "data/guolu/header&pipes.glb",
        "data/guolu/otheqhv.glb",
        "data/guolu/otheqhv1.glb",
        "data/guolu/pinguo-1.glb",
        "data/guolu/pinguo-2.glb",
        "data/guolu/shenmeiqi-1.glb",
        "data/guolu/shenmeiqi-2.glb",
        "data/guolu/shenmeiqi-3.glb",
        "data/guolu/shenmeiqi-4.glb",]
    }
    // that.viewer = new Viewer(that.el, options);
  }

  onEchartFontSize(val) {
    let docEl = document.documentElement,
      clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = 100 * (clientWidth / 10400);
    return val * fontSize;
  }

  onGetRightBottomEchart2() {
    return {
      legend: {
        top: "5%",
        textStyle: {
          color: "#fff",
          // fontSize: this.onEchartFontSize(1),
        },
      },
      tooltip: {},
      dataset: {
        source: [
          ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
          ['热能', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
          ['水能', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
          ['电能', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
        ]
      },
      series: [{
        type: 'pie',
        radius: '40%',
        center: ['25%', '30%'],
        itemStyle: {
          normal: {
            collor: "#000000",
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          },

        }

      }, {
        type: 'pie',
        radius: '40%',
        center: ['75%', '30%'],
        encode: {
          itemName: 'product',
          value: '2013'
        },
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          },

        }
      }, {
        type: 'pie',
        radius: '40%',
        center: ['25%', '75%'],
        encode: {
          itemName: 'product',
          value: '2014'
        }, itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          },

        }
      }, {
        type: 'pie',
        radius: '40%',
        center: ['75%', '75%'],
        encode: {
          itemName: 'product',
          value: '2015'
        }, itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          },

        }
      }]
    }
  }

  onGetRightBottom1Echart() {
    return {
      angleAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLabel: {
          formatter: "{value}",
          textStyle: {
            color: "#fff",
            // fontSize: this.onEchartFontSize(1),
          },
        },
      },
      radiusAxis: {
      },
      polar: {
      },
      series: [{
        type: 'bar',
        data: [1, 2, 3, 4, 3, 5, 1],
        coordinateSystem: 'polar',
        name: 'A',
        stack: 'a',
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          normal: {
            color: "#4C50A2"
          }
        }

      }, {
        type: 'bar',
        data: [2, 4, 6, 1, 3, 2, 1],
        coordinateSystem: 'polar',
        name: 'B',
        stack: 'a',
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          normal: {
            color: "#34934F"
          }
        }
      }, {
        type: 'bar',
        data: [1, 2, 3, 4, 1, 2, 5],
        coordinateSystem: 'polar',
        name: 'C',
        stack: 'a',
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          normal: {
            color: "#DDAD2B"
          }
        }
      }],
      legend: {
        top: "4%",
        show: true,
        data: ['A', 'B', 'C'],
        textStyle: {
          color: "#fff",
          // fontSize: this.onEchartFontSize(1),
        },
      }
    }
  }

  onGetRightTopEchart() {
    return {
      color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
      legend: {
        top: "10%",
        left: "right",
        textStyle: {
          color: "#fff",
          // fontSize: this.onEchartFontSize(1),
        },
        data: ['指标1', '指标2']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [

        {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
              // fontSize: this.onEchartFontSize(1),
            },
          },
        }
      ],
      yAxis: [

        {
          type: 'value',
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
              // fontSize: this.onEchartFontSize(1),
            },
          },
        }
      ],
      series: [
        {
          name: '指标1',
          type: 'line',
          stack: '总量',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(128, 255, 165)'
            }, {
              offset: 1,
              color: 'rgba(1, 191, 236)'
            }])
          },
          emphasis: {
            focus: 'series'
          },
          data: [140, 232, 101, 264, 90, 340, 250]
        },
        {
          name: '指标2',
          type: 'line',
          stack: '总量',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(0, 221, 255)'
            }, {
              offset: 1,
              color: 'rgba(77, 119, 255)'
            }])
          },
          emphasis: {
            focus: 'series'
          },
          data: [120, 282, 111, 234, 220, 340, 310]
        },
      ]
    }
  }


  onGetBottomContentEchart() {
    return {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '15%',
        left: 'right',
        orient: "vertical",
        bottom: "bottom",
        textStyle: {
          color: "#fff",
          // fontSize: this.onEchartFontSize(1),
        },
        // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              // fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '搜索引擎', itemStyle: { normal: { color: '#3AAD7A' } } },
            { value: 735, name: '直接访问', itemStyle: { normal: { color: '#FCBA62' } } },
            { value: 580, name: '邮件营销', itemStyle: { normal: { color: '#F93F00' } } },
            { value: 484, name: '联盟广告', itemStyle: { normal: { color: '#1C8CFF' } } },
          ]
        }
      ]
    }
  }

  onGetTopContentEchart() {
    return {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#fff",
          },
        },
      },
      legend: {
        textStyle: {
          color: "#fff",
          // fontSize: this.onEchartFontSize(1),
        },
        data: ["去年产量", "今年产量", "平均产量"],
      },
      xAxis: [
        {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              // fontSize: this.onEchartFontSize(1),
            },
          },
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          max: 250,
          interval: 50,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
              // fontSize: this.onEchartFontSize(1),
            },
          },
        },
        {
          type: "value",
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
              // fontSize: this.onEchartFontSize(1),
            },
          },
        },
      ],
      series: [
        {
          name: "去年产量",
          type: "bar",
          data: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
          ],
          itemStyle: {
            normal: {
              color: "#6993FD",
            },
          },
        },
        {
          name: "今年产量",
          type: "bar",
          data: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
          ],
          itemStyle: {
            normal: {
              color: "#DAA30F",
            },
          },
        },
        {
          name: "平均产量",
          type: "line",
          yAxisIndex: 1,
          data: [
            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
          ],
          itemStyle: {
            normal: {
              color: "#fff",
            },
          },
        },
      ],
    };
  }

  onHeader() {
    return (
      <div className="panel-header">
        <div className="panel-icon"></div>
        <div className="panel-title">
          <span className="big-title">开发平台</span>
          <span className="small-title">|&nbsp;&nbsp;&nbsp;小标题</span>
          <div className="title-icon"></div>
        </div>
      </div>
    );
  }

  onContent() {
    return (
      <div className="item-content">
        <div className="item-content-title">正常标题</div>
        <div className="item-content-num">
          156
          <span>&nbsp;&nbsp;项</span>
        </div>
      </div>
    );
  }

  render() {
    return (
      <>
        <div className="hdpi-body">
          <div className="panel  panel-left">
            <div className="left-top">
              {this.onHeader()}
              <div className="left-top-content">
                <div className="top-content-content">
                  <div className="top-content-item">
                    <div className="item-normal item-icon"></div>
                    {this.onContent()}
                  </div>
                  <div className="top-content-item">
                    <div className="item-warn item-icon"></div>
                    {this.onContent()}
                  </div>
                  <div className="top-content-item">
                    <div className="item-error item-icon"></div>
                    {this.onContent()}
                  </div>
                </div>
              </div>
              <div className="top-content-echart">
                <div className="top-content-divider">
                  <div className="divider-svg-1" ></div>
                  <div className="divider-svg-2" >
                    <span className="divider-title">往年历史记录</span>
                  </div>
                </div>
                <ReactEcharts
                  className="react_for_echarts"
                  style={{
                    height: "24vh",
                    width: "62vh",
                    fontSize: "2vh",
                  }}
                  option={this.onGetTopContentEchart()}
                />
              </div>
            </div>
            <div className="left-bottom">
              {this.onHeader()}
              <div className="left-bottom-content">
                <div className="left-bottom-content-echart">
                  <ReactEcharts
                    className="react_for_echarts"
                    style={{
                      height: "26vh",
                      width: "35vh",
                      fontSize: "2vh",
                    }}
                    option={this.onGetBottomContentEchart()}
                  />
                </div>
                <div className="left-bottom-content-label">
                  <div className="left-bottom-label-item">
                    <span style={{ marginLeft: "2vh" }}>标签1</span><span style={{ float: "right", marginRight: "2vh", opacity: "0.3" }}>70%</span>
                    {/* <Progress style={{ radius: 0 }} strokeLinecap="square" /> */}
                    <div className="label-progress-1">
                      <div className="label-progress-2"></div>
                    </div>
                  </div>
                  <div className="left-bottom-label-item">
                    <span style={{ marginLeft: "2vh" }}>标签1</span><span style={{ float: "right", marginRight: "2vh", opacity: "0.3" }}>60%</span>
                    {/* <Progress style={{ radius: 0 }} strokeLinecap="square" /> */}
                    <div className="label-progress-1">
                      <div className="label-progress-2"></div>
                    </div>
                  </div>
                  <div className="left-bottom-label-item">
                    <span style={{ marginLeft: "2vh" }}>标签1</span><span style={{ float: "right", marginRight: "2vh", opacity: "0.3" }}>80%</span>
                    {/* <Progress style={{ radius: 0 }} strokeLinecap="square" /> */}
                    <div className="label-progress-1">
                      <div className="label-progress-2"></div>
                    </div>
                  </div>
                  <div className="left-bottom-label-item">
                    <span style={{ marginLeft: "2vh" }}>标签1</span><span style={{ float: "right", marginRight: "2vh", opacity: "0.3" }}>50%</span>
                    {/* <Progress style={{ radius: 0 }} strokeLinecap="square" /> */}
                    <div className="label-progress-1">
                      <div className="label-progress-2"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="panel  panel-right">
            <div className="right-top">{this.onHeader()}
              <ReactEcharts
                className="react_for_echarts"
                style={{
                  height: "26vh",
                  width: "59vh",
                  fontSize: "2vh",
                }}
                option={this.onGetRightTopEchart()}
              />
            </div>
            <div className="right-bottom">
              {this.onHeader()}
              <div className="right-bottom-content">
                <div className="right-bottom-content-echart">
                  <ReactEcharts
                    className="react_for_echarts"
                    style={{
                      height: "51vh",
                      width: "36vh",
                      fontSize: "2vh",
                    }}
                    option={this.onGetRightBottom1Echart()}
                  />
                </div>
                <div className="right-bottom-content-label">
                  <ReactEcharts
                    className="react_for_echarts"
                    style={{
                      height: "45vh",
                      width: "25vh",
                      fontSize: "2vh",
                    }}
                    option={this.onGetRightBottomEchart2()}
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="middle-panel">
            <div className="middle-panel-content">
              <div className="middle-content-progress">

              </div>
              <div className="middle-content-progress-innner">
                <span>80%</span>
              </div>
              {/* <Progress type="circle" percent={30} width={80} /> */}
              <div className="middle-content-num">
                <span style={{ opacity: "0.2" }}>当前需求量</span>
                <span style={{ fontSize: "4vh" }}>250.1</span>
              </div>
            </div>
            <div className="middle-panel-content">
              <div className="middle-content-progress">

              </div>
              <div className="middle-content-progress-innner" style={{ border: "0.5vh solid #F2C309" }}>
                <span>80%</span>
              </div>
              {/* <Progress type="circle" percent={30} width={80} /> */}
              <div className="middle-content-num">
                <span style={{ opacity: "0.2" }}>当前需求量</span>
                <span style={{ fontSize: "4vh" }}>250.1</span>
              </div>
              {/* <Progress type="circle" percent={30} width={80} /> */}
            </div>
            <div className="middle-panel-content">
              <div className="middle-content-progress">

              </div>
              <div className="middle-content-progress-innner">
                <span>80%</span>
              </div>
              {/* <Progress type="circle" percent={30} width={80} /> */}
              <div className="middle-content-num">
                <span style={{ opacity: "0.2" }}>当前需求量</span>
                <span style={{ fontSize: "4vh" }}>250.1</span>
              </div>
              {/* <Progress type="circle" percent={30} width={80} /> */}
            </div>
          </div>
          <div className="three-viewer" style={{ borderRadius: 10, overflow: 'hidden' }} ref={(el) => { this.el = el; }} >

          </div>
        </div>
      </>
    );
  }
}

export default HdpiBody;
